<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--做一个表格（账单）
        商品名        数量   单价  总价
        乔丹牌篮球鞋——998/双
        黑人牌牙膏  5支，20元/支，总价___元
        金骏眉顶级茶叶  1.25两，328/两，总价__元-->
    <style>
        table{
            width:50%;
            height:40%;
        }
        td{
            border:1px solid;
        }

    </style>
</head>
<body>
<table id="tbl"><!--将table命名为tbl-->
    <tr>
        <td>商品名</td>
        <td>数量</td>
        <td>单价</td>
        <td>总价</td>
    </tr>
    <tr>
        <td>乔丹牌篮球鞋</td>
        <td>1双</td>
        <td>998元/双</td>
        <td></td></tr>
    </tr>
    <tr>
        <td>黑人牌牙膏</td>
        <td>5支</td>
        <td>20元/支</td>
        <td></td></tr>
    <tr>
        <td>金骏眉顶级茶叶</td>
        <td>1.25两</td>
        <td>328元/两</td>
        <td></td></tr>
</table>
<script>
    var tbl=document.getElementById('tbl');//获取表格元素
    var trs=tbl.getElementsByTagName('tr');//获取每一行

    for(var i=1;i<trs.length;i++)
    {
        var tds=trs[i].getElementsByTagName('td');//获取一行中的单元格
    tds[3].innerText=parseFloat(tds[1].innerText)*parseFloat(tds[2].innerText)+"元";

        if(i%2==1)//隔行换色
        {
           trs[i].style.background='#eee';
        }
    }




    /*var tds=trs[1].getElementsByTagName('td');//获取一行中的单元格
    tds[3].innerText=parseFloat(tds[1].innerText)*parseFloat(tds[2].innerText)+"元";

    tds=trs[2].getElementsByTagName('td');
    tds[3].innerText=parseFloat(tds[1].innerText)*parseFloat(tds[2].innerText)+"元";

    tds=trs[3].getElementsByTagName('td');
    tds[3].innerText=parseFloat(tds[1].innerText)*parseFloat(tds[2].innerText)+"元";
    用上面的for循环代替，代码更简洁*/
</script>
</body>
</html>